<template>
	<view>
		<view class="m-tab">
			<view class="m-navbar">
				<view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="level1">
					{{ sprintf(__('一级粉丝(%s)'), numFan1) }}
				</view>
				<view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']" @click="level2">
					{{ sprintf(__('二级粉丝(%s)'), numFan2) }}
				</view>
				<view :class="['m-navbar-item', tapindex==3?'m-navbar-item-on':'']" @click="level3" v-if="isDistLevel3">
					{{ sprintf(__('三级粉丝(%s)'), numFan3) }}
				</view>
			</view>
		</view>

		<scroll-view class="m-scrollBox" scroll-y="true" @scrolltolower="scrollbottom" v-if="(UserFans.length>0)">
			<view class="m-panel-bd">
				<view v-for="(item, index) in UserFans" :key="index" class="m-media-box m-media-box-appmsg">
					<view class="m-media-box-hd">
						<image lazy-load class="m-media-box-thumb" :src="(item.user_avatar)" />
					</view>
					<view class="m-media-box-bd">
						<label class="m-media-box-title">{{ item.user_nickname }}</label><label class="m-media-box-level" v-if="item.user_level_name">{{ item.user_level_name }}</label><label class="m-media-box-num">{{ __('收益：') }}
							<text>{{ __('￥') }}{{ mf(item.ugc_amount, 2) }}</text>
						</label>
						<view class="m-media-box-info">
							<view class="m-media-box-info-meta m-tiem">{{ item.user_time_str }}</view>
							<view class="m-media-box-info-meta m-num" v-if="item.ugc_level != 1">
								{{ __('来源:') }}{{ item.parent_nickname || __('已注销') }}
							</view>

							<view class="m-media-box-info-meta m-num" v-if="false">LV{{ item.ugc_level }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="m-loading-box">
				<block v-if="(ispage)">
					<view class="u-loadmore">
						<label class="u-loading"></label>
						<text class="u-loadmore-tips">{{ __('正在加载') }}</text>
					</view>
				</block>
				<block v-else>
					<view class="u-loadmore u-loadmore-line">
						<text class="u-loadmore-tips">{{ __('没有更多数据啦！') }}</text>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="m-nullcontent" v-else>
			<view class="m-nullpage-middle">
				<label class="iconfont icon-meiyougengduo"></label>
				<view class="m-null-tip">
					<text>{{ __('亲~什么都没有') }}</text>
					<text>{{ __('赶快去圈粉吧') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'


	export default {
		data() {
			return {
				page: 1,
				tapindex: 1,
				ispage: true,
				flag: true,
				UserFans: [],
				numFan1: 0,
				numFan2: 0,
				numFan3: 0,
				isDistLevel3: true
			};
		},

		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('我的粉丝')
			});

			this.getFunNum();

			this.setData({
				UserFans: []
			}), this.getFunlist();
			let that = this;

			// #ifdef MP-WEIXIN
			this.isDistLevel3 = false;
			// #endif


			// #ifdef H5
			if (this.$.isWeixin()) {
				this.isDistLevel3 = false;
			}
			// #endif
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			level1: function() {
				this.setData({
					tapindex: 1,
					UserFans: [],
					page: 1
				}), this.getFunlist()
			},
			level2: function() {
				this.setData({
					tapindex: 2,
					UserFans: [],
					page: 1
				}), this.getFunlist()
			},
			level3: function() {
				this.setData({
					tapindex: 3,
					UserFans: [],
					page: 1
				}), this.getFunlist()
			},

			getFunNum: function() {
				var params = {},
					that = this;
				that.$.request({
					url: this.Config.URL.fx.get_commission_order_num,
					data: params,
					success: function(data, status, msg, code) {
						that.setData({
							numFan1: data.user_fans.level_1,
							numFan2: data.user_fans.level_2,
							numFan3: data.user_fans.level_3,
						});
					}
				});
			},
			getFunlist: function() {
				var params = {
						page: this.page,
						ugc_level: this.tapindex
					},
					that = this;
				that.$.request({
					url: this.Config.URL.fx.lists_commission,
					data: params,
					success: function(data, status, msg, code) {
						if (data.items.length > 0) {
							for (var r = 0; r < data.items.length; r++) {
								data.items[r]['user_time_str'] = that.$.formatDateFormatter(data.items[r]['user_time']);
							}

							if (data.page >= data.total) {
								that.setData({
									UserFans: that.UserFans.concat(data.items),
									flag: false,
									ispage: false
								});
							} else {
								that.setData({
									UserFans: that.UserFans.concat(data.items),
									flag: true,
									ispage: true
								})
							}
						} else {
							that.setData({
								flag: false,
								ispage: false
							})
						}
					}
				});

			},
			scrollbottom: function() {
				if (this.flag) {
					var e = this;
					e.setData({
						flag: false
					}), clearTimeout(t);
					var t = setTimeout(function() {
						e.setData({
							page: parseInt(e.page) + 1
						}), e.getFunlist()
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../styles/_variables";

	.m-panel-bd {
		background-color: #fff;
	}

	.m-media-box-num {
		float: right;
		font-size: 28rpx;
	}

	.m-media-box-num text {
		color: $default-skin-bg;
	}

	.m-scrollBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 70rpx;
	}

	.m-num {
		float: right;
		color: $default-skin-bg
	}

	.m-media-box-thumb {
		border-radius: 100%;
	}

	.m-tab {
		position: fixed;
		width: 100%;
		top: var(--window-top);
		z-index: 2;
	}

	.m-navbar-item {
		padding: 20rpx 0;
		font-size: 24rpx;
	}

	.m-navbar-item:after {
		border: none;
	}

	.m-navbar-item.m-navbar-item-on {
		background-color: #fff;
		color: $default-skin-bg;
	}

	.m-navbar-item.m-navbar-item-on::before {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 6rpx;
		border-bottom: 6rpx solid $default-skin-bg;
		color: #CCCCCC;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		z-index: 3;
	}


	.m-media-box-info-meta {
		padding-right: 14rpx;
	}

	.m-media-box-level {

		font-size: .45rem;
		line-height: .6rem;
		background-color: #ff6700;
		height: .6rem;
		padding: 0 .1rem;
		margin-left: .2rem;
		border-radius: .1rem;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
		color: #fff;
	}
</style>